<template>
	<view class="mine-container" :style="{height: `${windowHeight}px`}">
		<view class="header-section">
			<view class="status_bar" />
			<view class="top-bar">
				<text>我的</text>
			</view>
			<view class="top-cell-icons-content">
        <uni-badge class="uni-badge-left-margin margin-lr"  v-if="bageNumberDes" :text="bageNumberDes" absolute="rightTop"  size="small">
				  <image src="/static/images/mine/message.png" class="top-cell-icon  " @click=" handleToMsg"/>
        </uni-badge>
        <image v-else src="/static/images/mine/message.png" class="top-cell-icon margin-lr " @click=" handleToMsg"/>
       <image src="/static/images/mine/white-set.png" class="top-cell-icon " @click="handleToSetting"/>
			</view>
			<view class="flex  justify-between" >
				<view class="flex align-center">
					<!-- @click="handleToAvatar" -->
					<!-- <image :src="user.avatar" class="cu-avatar xl round" mode="widthFix">
					</image> -->
					<view class='cu-avatar round xl' :style="`background-image: url(${user.avatar});`"></view>
					<view>
						<view class="top-info-content">
							<view class="flexrowcenter">
								<text class="text-df margin-lr-xs" style="text-align: center;">{{user.nickname}}</text>
								<view class="role-bg" v-for="rolesitem in user.roles">
									<text class="text-xs text-white">{{ rolesitem.name }}</text>
								</view>
							</view>
							<view class="margin-lr-xs">
								<text class="text-df">{{user.mobile}}</text>
							</view>
						</view>
					</view>

				</view>
				<view @click="gotopersoninfo" class="flex align-center">
					<view class="iconfont icon-right"></view>
				</view>
			</view>
		</view>

		<view class="content-section">
			<view class="mine-actions grid col-3 text-center">
				<view class="action-item" @click="handleDevice">
					<text class="top-value">{{deviceNumber}}</text>
					<text class="top-value-text space">设备数量</text>
				</view>

				<view class="action-item" @click="handleBuilding">
					<text class="top-value"> {{buildNumber}}</text>
					<text class="top-value-text space">建筑物</text>
				</view>
				<view class="action-item" @click="handleToPolic">
					<text class="top-value">{{policeReceiverNumber}}</text>
					<text class="top-value-text space">接警人</text>
				</view>
			</view>
			<uni-section class="contentItemCell bottomy" title=''>
				<uni-list-item 
				clickable
				@click="clickContontList(item)"
				showArrow v-for="item in infoList1" :key="item.id" >
					<template v-slot:header>
						<view class="flexrowcenter">
							<image class="left-cell-icon" :src="item.icon" mode="widthFix" />
							<text class="left-cell-text">{{item.text}}</text>
						</view>
					</template>
				</uni-list-item>
			</uni-section>

			<uni-section class="contentItemCell" title=''>
				<uni-list-item showArrow v-for="item in infoList3" :key="item.id" 
				 clickable
				 @click="clickContontList(item)">
					<template v-slot:header>
						<view class="flexrowcenter">
							<image class="left-cell-icon" :src="item.icon" mode="widthFix" />
							<text class="left-cell-text">{{item.text}}</text>
						</view>
					</template>
				</uni-list-item>
			</uni-section>

		</view>
	</view>
</template>

<script>
  import { getUserProfile } from "@/api/system/user"

  import authMixin from '@/mixin/auth.js'
  import {
    countReadNum,
	getMyCount,
  } from "@/api/mine/index"

  export default {
		data() {
			return {
        bageNumber:0,
        user: {},
				deviceNumber: 0,
				buildNumber: 0,
				policeReceiverNumber: 0,
				infoList1: [{
						id: 1,
						icon: '/static/images/mine/police-receiver.png',
						text: '接警人员',
           showauth: this.auth('thing:responder:query')
					},
					{
						id: 2,
						icon: '/static/images/mine/building.png',
						text: '建筑物',
            showauth: this.auth('thing:building:query')
					}, {
						id: 3,
						icon: '/static/images/mine/tariff-management.png',
						text: '资费管理',
            showauth: this.auth('iot:amount:query')
					}
				],
				infoList2: [],
				// infoList2: [{
				// 	id: 4,
				// 	icon: '/static/images/mine/organ-structure.png',
				// 	text: '组织单位'
				// }, {
				// 	id: 5,
				// 	icon: '/static/images/mine/user-magagement.png',
				// 	text: '用户管理'
				// }],
				infoList3: [
			// 		{
			// 			id: 6,
			// 			icon: '/static/images/mine/privacy-agreement.png',
			// 			text: '隐私协议',
            // showauth:true
			// 		},
					{
						id: 7,
						icon: '/static/images/mine/set-up.png',
						text: '系统设置',
            showauth:true
					}
				],
        globalConfig: getApp().globalData.config,
				name: this.$store.state.user.name,
				version: getApp().globalData.config.appInfo.version,
				mobile: this.$store.state.user.mobile
			}
		},
    mixins: [authMixin],
		onLoad() {
			this.getUser()
			getMyCount().then(({data}) => {
				this.deviceNumber = data.deviceCount
				this.buildNumber = data.buildingCount
				this.policeReceiverNumber = data.responderCount
			})
			this.getCountReadNum()
			uni.$on('refresh-countreadnum', () => {
				this.getCountReadNum()
			})
		},
    onUnload() {
      uni.$off('refresh-countreadnum')
    },
		computed: {
      bageNumberDes(){
        if(this.bageNumber == 0){
          return null
        }else if(this.bageNumber > 99){
          return  '99+'
        }else{
          return this.bageNumber
        }
      },
			avatar() {
				return this.$store.state.user.avatar
			},
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			}
		},
		methods: {
      getCountReadNum(){
        countReadNum().then(res=>{
          console.log('res>>',res)
          this.bageNumber = res.data || 0
        })
      },
      getUser() {
        getUserProfile().then(response => {
          this.user = response.data
        })
      },
			clickContontList(item){
        if(!item.showauth){
          uni.showToast({
            icon:'error',
            title: '无权限',
          })
          return
        }
        const id = item.id
				console.log('id>>',id)
				if(id===1){
					uni.navigateTo({url:'/pages/mine/accept-police-list/accept-police-list'})
				}
				if(id===2){
					this.$tab.navigateTo('/pages/mine/building/index')
				}
				if(id===3){
					uni.navigateTo({url:'/pages/mine/tariff-manage/tariff-manage'})
				}
        if(id === 6){
          this.handlePrivacy()
        }
        if(id === 7){
          this.handleToSetting()
        }

			},
			gotopersoninfo(){
				uni.$on('userRenew', (e)=>{
					if(e) {
						this.getUser()
					}
				})
				uni.navigateTo({url:'/pages/mine/peosoninfo/peosoninfo'})
			},
      handlePrivacy() {
        let site = this.globalConfig.appInfo.agreements[0]
        this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
      },
			handleToInfo() {
				this.$tab.navigateTo('/pages/mine/info/index')
			},
			handleToEditInfo() {
				this.$tab.navigateTo('/pages/mine/info/edit')
			},
			handleToSetting() {
				this.$tab.navigateTo('/pages/mine/setting/index')
			},
			handleToLogin() {
				this.$tab.reLaunch('/pages/login')
			},
			handleToAvatar() {
				this.$tab.navigateTo('/pages/mine/avatar/index')
			},
			handleLogout() {
				this.$modal.confirm('确定注销并退出系统吗？').then(() => {
					this.$store.dispatch('LogOut').then(() => {
						this.$tab.reLaunch('/pages/home/index')
					})
				})
			},
			handleHelp() {
				this.$tab.navigateTo('/pages/mine/help/index')
			},
			handleAbout() {
				this.$tab.navigateTo('/pages/mine/about/index')
			},
      handleToPolic(){
        if(this.auth('thing:responder:query')){
          uni.navigateTo({url:'/pages/mine/accept-police-list/accept-police-list'})
        }else{
          uni.showToast({
            icon:'error',
            title: '无权限',
          })
        }
      },
      handleDevice(){
        if(this.auth('thing:building-device:query')){
          this.$tab.reLaunch('/pages/devices/index')
        }else{
          uni.showToast({
            icon:'error',
            title: '无权限',
          })
        }
      },
			handleBuilding() {
        if(this.auth('thing:building:query')){
          this.$tab.navigateTo('/pages/mine/building/index')
        }else{
          uni.showToast({
            icon:'error',
            title: '无权限',
          })
        }
			},
      handleToMsg(){
         this.$tab.navigateTo('/pages/mine/system-messages/system-messages')
      }
		}
	}
</script>

<style lang="scss" scoped>

	.top-bar {
		width: 100%;
		text-align: center;
		vertical-align: middle;
		height: 40px;
		color: #ffffff;
		font-size: 18px;
	}

	.top-info-content {
		margin-left: 16rpx;
		display: flex;
		flex-direction: column;
		color: #ffffff;
		font-size: 16px;
	}

	.contentItemCell {
		background-color: #f5f6f7;
		margin-left: 15rpx;
		
		margin-right: 15rpx;
		border-radius: 4rpx;
	}

	.top-cell-icons-content {
		width: 100%;
		margin-top: -10rpx;
		height: 50rpx;
		display: flex;
		justify-content: flex-end;
		flex-direction: row;


	}

	.top-cell-icon {
		height: 50rpx;
		margin-left: 10rpx;
		width: 50rpx
	}

	.mine-container {
		width: 100%;
		height: 100%;


		.header-section {
			background-image: url('/static/images/mine/my-background.png');
			z-index: 1;
			background-size: cover;
			height: 440rpx;
			width: 750rpx;

			padding: 15px 15px 45px 15px;
			border-bottom-left-radius: 15px;
			border-bottom-right-radius: 15px;
			color: white;

			.login-tip {
				font-size: 18px;
				margin-left: 10px;
			}


			.cu-avatar {
				border: 2px solid #eaeaea;

				.icon {
					font-size: 40px;
				}
			}

			.user-info {
				margin-left: 15px;

				.u_title {
					font-size: 18px;
					line-height: 30px;
				}
			}
		}

		::v-deep .uni-section .uni-section-header {
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 6px 10px;
			font-weight: normal
		}

		::v-deep .iconfont {
			font-size: 22px;
		}
		.role-bg {
			background-image: url('/static/images/mine/role-bg.png');
			background-size: cover;
			border-radius: 20rpx;
			min-width: 86rpx;
			padding-left: 10rpx;
			padding-right: 10rpx;
			height: 44rpx;
		
			text-align: center;
			vertical-align: middle;
			margin-left: 5rpx;

		}

		.content-section {
			position: relative;
			top: -90rpx;
			z-index: 10;
		}

		.mine-actions {

			margin-left: 20px;
			margin-right: 20px;
			padding: 20px 0px;
			border-radius: 8px;
			background-color: white;


		}

		.action-item {
			display: flex;
			flex-direction: column;
		}

		.left-cell-icon {
			height: 50rpx;
			width: 50rpx;
			margin-right: 16rpx;
		}

		.left-cell-text {
			color: #333333;
			font-size: 14px
		}

		.top-value {
			color: #307cf6;
			font-size: 16px
		}

		.top-value-text {
			color: #333333;
			font-size: 14px;
		}

		.space {
			margin-top: 18rpx
		}



		.bottomy {}
	}
</style>